<template>
    <div>
        <div class="crumbs">
            <Breadcrumb>
                <BreadcrumbItem :to="'/'+module+'_cate'"><Icon type="ios-folder-open"/> {{moduleText}}分类</BreadcrumbItem>
                <BreadcrumbItem>{{cate}} 自定义字段</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card>
            <span slot="title">说明</span>
            <p style="color:#888;">
                这里分配好字段之后，此分类下的所有{{moduleText}}编辑表单里都会附加这些自定义字段<br/>
                英文名只能使用字母和下划线，不要用标点符号、中文、空格，不要随意更改，否则可能造成{{moduleText}}已保存的这个字段值消失<br/>
                显示名称可以随意修改，中文，标点符号都可以使用<br/>
                显示位置：列表页表示只显示在产品列表页里，详情页表示显示在产品详情页中，详情页中只支持多行文本和图片上传两种<br/>
                支持拖拽排序功能
            </p>
        </Card>
        <Form ref="form" :model="{}" :label-width="60" inline class="customForm">
            <ul id="list" ref="list" style="margin-top:10px;">
                <li draggable="true" class="clearfix li"
                    v-for="(item, index) in custom" 
                    :data-id="item.en" 
                    :data-index="index" 
                    :key="item.id"
                    @dragstart="dragstartEvent"
                    @dragend="dragendEvent"
                    @dragenter="dragenterEvent"
                    @dragleave="dragleaveEvent"
                    @dragover="dragoverEvent"
                    @drop="dropEvent"
                >
                    <FormItem label="字段名称">
                        <Input v-model="item.en" placeholder="只能是字母或下划线"></Input>
                    </FormItem>
                    <FormItem label="显示名称">
                        <Input v-model="item.name" placeholder="支持中文"></Input>
                    </FormItem>
                    <FormItem label="字段类型">
                        <Select v-model="item.type" style="width:200px">
                            <Option v-for="(v, k) in type" :value="k" :key="k">{{v}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="是否必填">
                        <Checkbox v-model="item.require" :true-value="1" :false-value="0" label=""></Checkbox>
                    </FormItem>
                    <FormItem label="可筛选">
                        <Checkbox v-model="item.search" :true-value="1" :false-value="0" label=""></Checkbox>
                    </FormItem>
                    <FormItem label="单位" v-if="item.type == 'int' || item.type == 'float'">
                        <Input v-model="item.unit" placeholder="数值计量单位"></Input>
                    </FormItem>

                    <FormItem label="选项" v-if="item.type == 'radio' || item.type == 'checkbox'">
                        <Input style="width:300px" type="textarea" v-model="item.option" placeholder="每行一个选项"></Input>
                    </FormItem>

                    <FormItem label="允许文件类型" v-if="item.type == 'file'">
                        <Input style="width:300px" type="textarea" v-model="item.ext" placeholder="每行一种文件类型,例如doc，不输入表示无限制"></Input>
                    </FormItem>

                    <Icon type="md-close-circle" :size="30" style="color:#d00;float:right;" @click="remove(i)" />
                </li>
            </ul>
            <div id="btnDiv">
                <FormItem>
                    <Button icon="md-checkmark" type="primary" @click="submitForm">保存</Button>
                    <Button icon="md-add" type="success" @click="add">添加字段</Button>
                    <Button icon="md-copy" type="info" @click="dialogShow = true">复制字段</Button>
                    <Button icon="md-arrow-back" @click="back">返回</Button>
                </FormItem>
            </div>
        </Form>

        <Modal v-model="dialogShow" title="复制字段">
            <p>复制时，会清空本类型的字段，再复制目标类型的字段,字段变更后，此类型已经有的样本数据会丢失.</p>
            <Form :label-width="120">
                <FormItem label="从样本类型复制：">
                    <Select v-model="cate_id" placeholder="样本类型" filterable>
                        <Option :key="id" v-for="(title, id) in cates" :value="id">{{title}}</Option>
                    </Select>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="dialogShow = false">取消</Button>
                <Button type="primary" @click="copy">复制</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        components: {
            
        },
        data: function(){
            return {
                url: pub.apiDomain + 'cate',
                custom: [],
                id: 0,
                module: '',
                dialogShow: false,
                cate_id: 0,
                cate: '',
                cates:{},//分类
                type: {
                    'input':'单行文本',
                    'textarea':'多行文本',
                    'int':'整数',
                    'float':'小数',
                    'editor':'编辑器',
                    'radio':'单选',
                    'checkbox':'多选',
                    'date':'日期',
                    'datetime':'日期时间',
                    'image':'图片上传',
                    'file':'文件上传',
                },
                lock: true,
            }
        },
        created(){
            this.getData();
            this.$axios.post(pub.apiDomain + 'cate/map/module/sample', {}).then(res => {
                this.cates = res.d;
            });
        },
        computed: {
            moduleText: function (){
                if(this.module == 'news') return '资讯';
                if(this.module == 'product') return '产品';
            }
        },
        methods: {
            //加载数据
            getData() {
                this.id = this.$route.params.id;
                this.$axios.get(this.url + '/get/id/'+this.id).then((res) => {
                    this.custom = res.d.custom;
                    this.module = res.d.module;
                    this.cate = res.d.title;
                })
            },
            back(){
                this.$router.go(-1);
            },
            add(){
                //添加默认值
                this.custom.push({
                    en:'',
                    name:'',
                    type:'input',
                    cate:'Attribute',
                    require: 0,
                    search: 0,
                });
            },
            copy(){
                if(this.cate_id == 0) return this.$Message.error('请选择要复制的字段类型');
                if(!confirm('复制时会清空本类型字段再复制目标类型字段。字段变更后，此类型已经有的样本数据会丢失，确定吗？')) return ;
                this.$axios.get(this.url + '/copy/from/'+this.cate_id+'/to/'+this.id).then((res) => {
                    this.$Message.success('复制成功');
                    this.getData();
                    this.dialogShow = false;
                })
            },
            remove(i){
                this.custom.splice(i, 1);
            },
            submitForm() {
                //根据新的排序，调整this.custom中的字段顺序
                var newCustom = []; 
                this.$refs.list.querySelectorAll('li.li').forEach(e => {
                    var field_name = e.getAttribute('data-id');
                    this.custom.forEach(r => {
                        if(r.en == field_name) {
                            return newCustom.push(r);
                        }
                    });
                });
                this.$axios.post(this.url + '/save_setting/id/'+this.id, newCustom).then((res) => {
                    this.$Message.success('保存成功！');
                    //this.$router.push('/'+this.module+'_cate');
                })
            },


            //拖拽开始(参数是原始元素)
            dragstartEvent(ev) {
                ev.dataTransfer.setData("start", ' ');  //必须写这行,兼容火狐
                this.dragElement = ev.target;
                ev.target.style.backgroundColor = '#f8f8f8';
            },
            //进入元素(目标元素)
            dragenterEvent(ev) {
                if(ev.target.tagName == 'LI' && this.dragElement != ev.target){
                    ev.target.parentNode.insertBefore(this.dragElement, ev.target);
                }
            },
            //移动过程
            dragoverEvent(ev) {
                ev.preventDefault();
            },
            //离开元素(目标元素)
            dragleaveEvent(ev) {
                if(ev.target.tagName == 'LI' && this.dragElement != ev.target){
                    if(this.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
                        ev.target.parentNode.appendChild(this.dragElement);
                        this.lock = false;
                    }else{
                        this.lock = true;
                    }
                }
            },
            //拖拽结束(目标元素元素)
            dropEvent(ev) {
                ev.preventDefault();
            },
            //拖拽结束(原始元素)
            dragendEvent(ev) {
                ev.target.style.backgroundColor = '#fff';
            },
        }
    }
</script>
<style scoped>
#btnDiv{
    position: fixed;
    top: 75px;
    right: 28px;
}
.ivu-form-item{margin-bottom: 0;}
#list>li{clear:both;list-style: none; background:#fff;padding: 6px 12px;margin-bottom: 6px;border-radius: 6px;border:1px solid #ccc;}
</style>
<style>
.customForm .ivu-card-body{
    padding: 8px 16px;
}
</style>